<template>
  <div class="certification h-[100%] flex flex-col py-10 px-[20rem]">
    <div class="text-2xl font-bold mb-[3rem] flex justify-start items-center"><el-icon class="!text-[--el-color-primary] mr-2"><Stamp /></el-icon>产品认证</div>
    <div class="main flex w-full h-[85%] pb-[80px] relative">
      <el-tabs
          tab-position="left" style="height: 160px"
          class="demo-tabs w-[100px]"
          v-model="activeTabName"
          @tab-click="handleTabClick">
        <el-tab-pane v-for="(tab, idx) of tabs" :key="idx" :label="tab.label" :name="tab.name"></el-tab-pane>
      </el-tabs>

      <section class="content-wrapper flex-1 ml-10" ref="sectionWrapperRef">
        <section class="item" v-for="(tab, idx) of tabs" :key="idx">
          <el-divider content-position="left" :id="tab.name" class="!mb-[40px] list-title" :class="{ '!mt-[80px]': idx !== 0 }"><span class="text-xl">{{ tab.label }}</span></el-divider>
          <component :is="tab.component" :ref="tab.name" />
        </section>
      </section>
      <div class="footer absolute left-0 right-0 bottom-0 w-full py-2">
        <el-button type="primary" class="absolute right-0" @click="handleSubmit">提交审核</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import BaseForm from "~/views/CertificationView/components/BaseForm.vue";
import SaleForm from "~/views/CertificationView/components/SaleForm.vue";
import LogisticsServicesForm from "~/views/CertificationView/components/LogisticsServicesForm.vue";
import MediaForm from '~/views/CertificationView/components/MediaForm.vue';
import { useRouter } from "vue-router";
import { Calendar, Setting, Stamp } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
const router = useRouter();

const tabs = [
  {
    label: '基础信息',
    name: 'baseFormRef',
    component: BaseForm,
  },
  {
    label: '销售信息',
    name: 'saleFormRef',
    component: SaleForm,
  },
  {
    label: '物流服务',
    name: 'logisticsServicesFormRef',
    component: LogisticsServicesForm,
  },
  {
    label: '图文描述',
    name: 'mediaFormRef',
    component: MediaForm,
  },
]

const activeTabName = ref('baseFormRef')
const sectionWrapperRef = ref<HTMLElement>()

const handleTabClick = (tab: TabsPaneContext, event: Event) => {
  let index = Number(tab.index)
  let blocks = document.querySelectorAll('.list-title') as any
  blocks[index].scrollIntoView({behavior: "smooth", block: "start", inline: "end"});
}

let baseFormRef = ref<BaseForm>(); // 基本信息
let saleFormRef = ref<SaleForm>(); // 销售信息
let logisticsServicesFormRef = ref<LogisticsServicesForm>(); // 审核信息
let mediaFormRef = ref<MediaForm>(); // 图文描述

onMounted(() => {
  (sectionWrapperRef.value as any).addEventListener('scroll', handleScroll, false)
})

onBeforeUnmount(() => {
  (sectionWrapperRef.value as any).removeEventListener('scroll', handleScroll, false)
})

const handleScroll = (e: Event) => {
  let blocks = document.querySelectorAll('.list-title') as any
  let scrollTop = sectionWrapperRef.value.scrollTop
  let index = 0
  for (let i = 0; i < blocks.length; i++) {
    if (scrollTop >= blocks[i].offsetTop - 250) {
      index = i
    }
  }
  activeTabName.value = tabs[index].name
}

const handleSubmit = async () => {
  const baseForm = await passBaseForm();
  const saleForm = await passSaleForm();
  const logisticsServicesForm = await passLogisticsServicesForm();
  const mediaForm = await passMediaForm();
  if (baseForm && saleForm && logisticsServicesForm && mediaForm) {
    router.push('/certification-detail');
  }
}

const passBaseForm = async () => {
  return new Promise((resolve, reject) => {
    baseFormRef.value![0].$refs.ruleFormRef.validate(async (valid, fields) => {
      if (valid) {
        const params = baseFormRef.value![0].ruleForm;
        console.log(params);
        resolve(true);
      } else {
        console.log('error submit!', fields);
        baseFormRef.value![0].$el?.scrollIntoView({behavior: "smooth", block: "start", inline: "end"});
        reject(false);
      }
    });
  });
}

const passSaleForm = async () => {
  return new Promise((resolve, reject) => {
    saleFormRef.value![0].$refs.ruleFormRef.validate(async (valid, fields) => {
      if (valid) {
        const params = saleFormRef.value![0].ruleForm;
        console.log(params);
        resolve(true);
      } else {
        console.log('error submit!', fields);
        saleFormRef.value![0].$el?.scrollIntoView({behavior: "smooth", block: "start", inline: "end"});
        reject(false);
      }
    });
  });
}

const passLogisticsServicesForm = async () => {
  return new Promise((resolve, reject) => {
    logisticsServicesFormRef.value![0].$refs.ruleFormRef.validate(async (valid, fields) => {
      if (valid) {
        const params = logisticsServicesFormRef.value![0].ruleForm;
        console.log(params);
        resolve(true);
      } else {
        console.log('error submit!', fields);
        logisticsServicesFormRef.value![0].$el?.scrollIntoView({behavior: "smooth", block: "start", inline: "end"});
        reject(false);
      }
    });
  });
}

const passMediaForm = async () => {
  return new Promise((resolve, reject) => {
    mediaFormRef.value![0].$refs.ruleFormRef.validate(async (valid, fields) => {
      if (valid) {
        const params = mediaFormRef.value![0].ruleForm;
        console.log(params);
        resolve(true);
      } else {
        console.log('error submit!', fields);
        reject(false);
      }
    });
  });
}
</script>

<style lang="scss" scoped>
.content-wrapper {
  overflow: auto;
}

</style>
